<template>
  <div>
    <!-- 生物测量 -->
    <table class="region_data">
      <tbody>
        <tr>
          <th class="title_bg w-[15%]" :rowspan="7">
            <div>
              <div class="text-[1rem]">
                {{ props.title }}
              </div>

              <div class="flex justify-center items-center mt-[1rem]">
                <span class="font-medium text-[0.7rem]">AL/CR: </span>
                <div class="min-w-[2.5rem]">
                  {{
                    data_form[`AxialRatio${props.capName}`] ||
                    props.dbClickPlaceholder
                  }}
                </div>
              </div>
            </div>
          </th>
          <th class="w-[2rem]"></th>
          <th class="content">CCT</th>
          <th class="content">AD</th>
          <th class="content">LT</th>
          <th class="content">VT</th>
          <th class="content">AL</th>
          <th class="w-[25%]"></th>
        </tr>
        <tr v-for="item in 5" :key="item">
          <th>#{{ item }}</th>
          <td>
            {{
              data_form[`${props.lowerName}Cct${item}`] ||
              props.dbClickPlaceholder
            }}
          </td>
          <td>
            {{
              data_form[`${props.lowerName}Ad${item}`] ||
              props.dbClickPlaceholder
            }}
          </td>
          <td>
            {{
              data_form[`${props.lowerName}Lt${item}`] ||
              props.dbClickPlaceholder
            }}
          </td>
          <td>
            {{
              data_form[`${props.lowerName}Vt${item}`] ||
              props.dbClickPlaceholder
            }}
          </td>
          <td>
            {{
              data_form[`Al${props.capName}${item}`] || props.dbClickPlaceholder
            }}
          </td>
          <th :rowspan="6" v-if="item == 1" class="rt_th">
            <ul class="rt_box">
              <li>
                <div class="rt_content">
                  <div class="rt_title">K1</div>

                  <span truncated class="rt_value">
                    {{
                      data_form[`AxialRatio${props.capName}1`] ||
                      props.dbClickPlaceholder
                    }}
                  </span>
                </div>
              </li>
              <li>
                <div class="rt_content">
                  <div class="rt_title">K2</div>

                  <span truncated class="rt_value">
                    {{
                      data_form[`AxialRatio${props.capName}2`] ||
                      props.dbClickPlaceholder
                    }}
                  </span>
                </div>
              </li>
              <li>
                <div class="rt_content">
                  <div class="rt_title">AST</div>

                  <span truncated class="rt_value">
                    {{
                      data_form[`${props.lowerName}Ast`] ||
                      props.dbClickPlaceholder
                    }}
                  </span>
                </div>
              </li>
              <li>
                <div class="rt_content">
                  <div class="rt_title">AVGR</div>

                  <span truncated class="rt_value">
                    {{
                      data_form[`membraneCurvature${props.typeNameCaps}`] ||
                      props.dbClickPlaceholder
                    }}
                  </span>
                </div>
              </li>
              <li>
                <div class="rt_content">
                  <div class="rt_title">WTW</div>

                  <span truncated class="rt_value">
                    {{
                      data_form[`WTW${props.capName}`] ||
                      props.dbClickPlaceholder
                    }}
                  </span>
                </div>
              </li>
              <li>
                <div class="rt_content">
                  <div class="rt_title">PS</div>

                  <span truncated class="rt_value">
                    {{
                      data_form[`PupilDiameter${props.capName}`] ||
                      props.dbClickPlaceholder
                    }}
                  </span>
                </div>
              </li>
            </ul>
          </th>
        </tr>
        <tr>
          <th>AVG</th>
          <td>
            {{ data_form[`${props.lowerName}Cct`] || props.dbClickPlaceholder }}
          </td>
          <td>
            {{ data_form[`${props.lowerName}Ad`] || props.dbClickPlaceholder }}
          </td>
          <td>
            {{ data_form[`${props.lowerName}Lt`] || props.dbClickPlaceholder }}
          </td>
          <td>
            {{ data_form[`${props.lowerName}Vt`] || props.dbClickPlaceholder }}
          </td>
          <td>
            {{ data_form[`Al${props.capName}`] || props.dbClickPlaceholder }}
          </td>
        </tr>
        <!-- <tr>
          <th>SD</th>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr> -->
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";

onMounted(() => {});

const emit = defineEmits(["handleDbClickFocus", "handleDbClickBlur"]);
const props = defineProps({
  title: {
    type: String,
    default: "OD / 右眼",
  },
  regionId: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: String,
    default: "",
  },
  dbClickPlaceholder: {
    type: String,
    default: "",
  },
  lowerName: {
    type: String,
    default: "right",
  },
  capName: {
    type: String,
    default: "Right",
  },
  directionName: {
    type: String,
    default: "右眼",
  },

  od_os_data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const data_form = ref({});
let cleanup;
onMounted(() => {
  cleanup = watchStorage("refresh_check_region_data", (e) => {
    data_form.value = e.data.od_os_data || {};
  });

  return () => cleanup();
});

onBeforeUnmount(() => {
  cleanup();
});

watchEffect(() => {
  data_form.value = props.od_os_data || {};
});
</script>

<style scoped lang="scss">
.region_data {
  @apply text-[0.65rem];
  tr {
    height: 1.8rem !important;
  }
}
.content {
  @apply w-[12%];
}
.rt_th {
  background-color: transparent;
  padding: 0;
}
.rt_box {
  font-weight: 400;
  @apply w-full h-[10rem] flex flex-col justify-around items-center text-normal;
  li {
    @apply w-full h-full flex items-center;
    &:hover {
      @apply bg-[#f5f5f5] cursor-pointer;
    }
    .rt_content {
      @apply w-full flex  items-center;

      .rt_title {
        @apply w-[3rem];
      }

      .rt_value {
        @apply min-w-[4rem] ml-[0.1rem] h-full text-left;
      }
    }
  }
}
</style>